<template>
	<!-- 猜你喜欢 begin -->
	<view class="cu-list menu-avatar">
		<view class="cu-item cur" v-for="(item, index) in props.list" :key="index"  @click="handleSelect(item)">
			<view class="cu-avatar radius lg" :style="'background-image:url('+item.thumbnail+');'">
				<view class="cu-tag badge"></view>
			</view>
			<view class="content">
				<view>
					<view class="text-cut margin-right-sm">{{item.name}}</view>
					<view class="cu-tag round bg-menu padding-lr-sm ">{{item.shopName}}</view>
				</view>
				<view class="text-gray text-sm flex">
					<view class="text-cut"> 
					<text class="text-red text-size-12">￥</text>
					<text class="text-red text-size-30 margin-right">{{item.price}}</text>
					<text class="text-gray text-del text-size-12">￥{{item.originalPrice}}</text>
					</view></view>
			</view>
			<view style="width: 5rem;" class="action">
				<view style="width: 5rem;" class="text-grey text-xs">{{'超出配送范围'}}</view>
				<view class="cu-tag  sm round bg-orange text-xs">{{item.keyword}}</view>
			</view>
		</view>
	</view>
	<!-- 猜你喜欢 end -->
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		list: Array
	})
	const handleSelect = (e:any) => {
		emit('action', e)
	}
</script>

<style lang="scss" scoped>
	.products {
		padding: 20rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.product {
			background-color: #ffffff;
			width: 335rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			border-radius: $border-radius-lg;
			margin-bottom: 20rpx;
			box-shadow: 0px 2px 4px 0px rgba(200,200,200,0.5), 0px 2px 4px 0px rgba(200,200,200,0.5);
			border-radius: 8px;

			.cu-tag {
				position: absolute;
				left: 6px;
				top: 8px;
			}

			.product-image {
				width: 100%;
				height: 180px;
				min-height: 180px;
				border-radius: $border-radius-lg $border-radius-lg 0 0;
			}

			.info {
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.desc {
					display: flex;
					flex-direction: column;

					.title {
						font-size: $font-size-lg;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 6rpx;
					}

					.sub {
						font-size: $font-size-sm;
						color: $text-color-assist;
					}
				}

				.extra {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						color: $color-primary;
						font-size: $font-size-lg;
						font-weight: 500 !important;
					}

					.action {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
	.text-del{
		text-decoration: line-through;
	}
</style>
